<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

    /*
        比如有一个超链接，我想增大超链接的点击范围。就需要设置超链接的宽高，而超链接是一个行内元素不能设置宽高，这个时候就需要转换显示模式
        使用display属性去转换
    */

    /* 块级元素 宽高生效 默认宽度是父级的100% */
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* display: inline-block; */
        /* display: inline; */
    }

    /* 行内元素 一行共存多个 宽高属性不生效 宽高由内容撑开 */
    span {
        width: 200px;
        height: 200px;
        background-color: green;
    }

    /* 行内块 宽高生效 默认的宽高由内容撑开 */
    img {
        width: 100px;
        height: 100px;
    }

</style>

<body>
    <div>块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素</div>
    <div>块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素</div>
    <span>行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素</span>
    <img src="./../resources/素材2.png">
    <img src="./../resources/素材2.png">
</body>

</html>